/* 
  1 发送请求 接收数据 
  2 点击轮播图 预览大图
    1 给轮播图绑定点击事件
    2 调用小程序的api previewImage
  3 点击 加入购物车
    1 先绑定点击事件
    2 获取缓存中的购物车数据 数组格式
    3 先判断 当前的商品是否已经存在于 购物车
    4 已经存在 修改商品数据 执行购物车数量++ 重新把购物车数组 填充回缓存中
    5 不存在于购物车的数组中 直接给购物车数组添加一个新元素 新元素 带上 购买数量属性 num
    6 弹出提示
  4 商品收藏
    1 
 */
import {
  request
} from "../../request/index.js";
import regeneratorRuntime from '../../lib/runtime/runtime';
// pages/goods_detail/index.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    goodsObj: {},
    // 商品是否被收藏过
    isCollect:false
  },
  // 商品对象, 对象用来保存数据源
  GoodsInfo: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
   /*  const { goods_id } = options;
    console.log("goods_id:" + goods_id);
    this.getGoodsDetail(goods_id) */
  },
  /* 
  1 获取商品详情数据
  2 形参和实参都是goods_id
  */
  async getGoodsDetail(goods_id) {
    const goodsObj = await request({ url: "/goods/detail", data: { goods_id } });
    console.log("goodsObj in getGoodsDetail(goods_id)-unmodified:", goodsObj)
    this.GoodsInfo = goodsObj;
    // console.log(goodsObj);
    /* this.setData({
      goodsObj : res
    }) */
    // 1 获取缓存中的商品收藏数组
    let collect = wx.getStorageSync("collect") || [];
    // 2 判断当前商品是否被收藏
    let isCollect = collect.some(v => v.goods_id === this.GoodsInfo.goods_id);
    this.setData({
      // 定向获取数据源下面的数据
      goodsObj: {
        goods_name: goodsObj.goods_name,
        goods_price: goodsObj.goods_price,
        // iphone部分手机 不识别 webp图片格式
        // 最好找到后台 让他进行修改
        // 临时自己改 确保后台存在 1.webp => 1.jpg
        goods_introduce: goodsObj.goods_introduce.replace(/\.webp/g, '.jpg'),
        pics: goodsObj.pics,
      },
      isCollect
    })
    console.log("this.data.goodsObj(restructured):", this.data.goodsObj)
  },
  /* 
  1 点击轮播图 放大预览
  2 点击任一轮播图后, 都会跳转这个方法
  */
  handlePreviewImage(e) {
    console.log('%c' + '预览', "color:red;font-size:100px;background-image:linear-gradient(to left,#0094ff,pink)")
    console.log("预览")
    console.log('%c 李四', 'color: red; font-size: 14px')
    // 1 先构造要预览的图片数组 (pics数组下面五个元素下面各有一个pics_mid.总共5个图片元素)
    const urls = this.GoodsInfo.pics.map(v => v.pics_mid)
    //  2 接收传递过来的图片url (传参)
    console.log(e)
    const current = e.currentTarget.dataset.url;
    wx.previewImage({
      /* 
      表示点击的谁, 先写固定,点击第一张
      */
      // current: current,
      current,
      // urls: urls
      urls
    });
  },

  // 点击 加入购物车
  handleCartAdd() {
    // console.log("shoppingCart")
    /* 
    1 获取缓存中的购物车 数组
    2 最初没有数据?!
    3 控制台里面的storage数据
    4 wx.getStorageSync("cart")||[] 有数据源就不是false而是true,不会选[]/false
    5 可以构建多个cart数组
    */
    let cart = wx.getStorageSync("cart") || [];
    // 实际第一次打印出来了||或许就是storage里面的数字 (self-created theory)
    console.log("cart1:", cart)
    // console.log("cart2:"+cart)
    // 2 判断 商品对象是否存在于购物车数组中 拿到索引
    console.log("this.GoodsInfo", this.GoodsInfo)
    console.log("this.GoodsInfo.goods_id", this.GoodsInfo.goods_id)
    // 1)找到就是cart数组下面元素的下标值, 2)没找到就返回-1
    let index = cart.findIndex(v => v.goods_id === this.GoodsInfo.goods_id)
    console.log("index:" + index)
    if (index === -1) {
      // 3 不存在 第一次添加
      this.GoodsInfo.num = 1;
      cart.push(this.GoodsInfo);
    } else {
      // 4 已经存在购物车数据 执行 num++
      cart[index].num++;
    }
    console.log("cart:", cart)
    /* 5 把购物车添加回缓存中
         5.1 举例：wx.setStorageSync('key', 'value') 向本地存储中写入内容
    */
    wx.setStorageSync("cart", cart)
    // 6 弹框/窗提示
    wx.showToast({
      title: '加入成功',
      icon: 'success',
      // duration默认事件1.5秒钟
      /* image: '',
      duration: 1500, */
      // true 防止用户 手抖 疯狂点击按钮 避免反复加入购物车
      mask: true,
    });

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    let pages = getCurrentPages();
    let currentPage = pages[pages.length - 1];
    let options = currentPage.options;

    const { goods_id } = options;
    console.log("goods_id:" + goods_id);
    this.getGoodsDetail(goods_id)


  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})